<template>
  <div style="background-color: #f7f7f7; height: 100%; width: 100%; padding: 15px">
    <div class="user-card">
      <el-upload
        style="display: flex; align-items: center; justify-content: center; padding: 10px"
        class="avatar-uploader"
        action="http://127.0.0.1:8888/upload/image"
        :on-success="handleAvatarSuccess"
        :show-file-list="false"
        :limit="1"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>

      <div class="description">
        <el-descriptions :column="1" :colon="false" direction="vertical">
          <el-descriptions-item label="咸薯号">{{ userInfo.number }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ userInfo.phone }}</el-descriptions-item>
          <el-descriptions-item label="IP地址">{{ userInfo.province }} {{ userInfo.city }}</el-descriptions-item>
          <el-descriptions-item label="我的密码">
            <el-link type="primary" @click="dialog = true">修改密码</el-link>
          </el-descriptions-item>
        </el-descriptions>
        <div class="user-info-item">
          <div class="user-info-item-label">咸薯号</div>
          <div class="user-info-item-content">
            {{ userInfo.number }}
          </div>
        </div>
        <el-form :model="form">
          <el-form-item label="昵称">
            <input class="input" type="text" v-model="form.nickName" />
          </el-form-item>

          <el-form-item label="个人简介">
            <textarea class="textarea" :placeholder="form.intro" v-model="form.intro"></textarea>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" size="small">确认修改</el-button>
            <el-button size="small" @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-dialog title="设置密码" v-model="dialog" append-to-body>
      <el-form :model="form">
        <el-form-item label="设置密码" :label-width="'100px'">
          <el-input type="password" v-model="form.password" />
        </el-form-item>
        <el-form-item label="重新输入密码" :label-width="'100px'">
          <el-input type="password" v-model="form.passwordCheck" />
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="dialog = false">取 消</el-button>
          <el-button type="primary" @click="postPass()">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { getUserInfo } from '@/api/user';
import { useUserStore } from '@/stores/user';
import type { UploadProps } from 'element-plus/es/components/upload/src/upload.mjs';
import { onMounted, reactive, ref } from 'vue';
const form = reactive({ nickName: '', intro: '', avatar: '', password: '', passwordCheck: '' });
const dialog = ref(false);
const userStore = useUserStore();

const userInfo = userStore.userInfo;
const imageUrl = ref('');
const onSubmit = () => {};

const getUserInformation = () => {
  getUserInfo().then((res) => {
    console.log(2424, res);

    form.nickName = res.result.nickName;
    form.intro = res.result.intro;
    form.avatar = res.result.avatar;
    imageUrl.value = form.avatar;

    console.log(2323, form);
    console.log(1200, form.nickName);
  });
};
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};

const cancel = () => {};
const postPass = () => {};

onMounted(() => {
  getUserInformation();
});
</script>

<style scoped lang="less">
.user-card {
  height: 100%;
  border-radius: 10px;
  background-color: white;
  padding: 10px;

  .description {
    .input {
      padding: 12px 16px 12px 16px;
      width: 60%;
      height: 25px;
      line-height: 25px;
      background: rgba(0, 0, 0, 0.03);
      caret-color: rgba(51, 51, 51, 0.3);
      border-radius: 10px;
      border: none;
      outline: none;
      resize: none;
      color: #333;
    }

    .textarea {
      padding: 12px 16px 12px 16px;
      width: 100%;
      height: 70px;
      line-height: 16px;
      background: rgba(0, 0, 0, 0.03);
      caret-color: rgba(51, 51, 51, 0.3);
      border-radius: 10px;
      border: none;
      outline: none;
      resize: none;
      color: #333;
    }
  }
}

:deep(.avatar-uploader .el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 100%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: #409eff;
}

:deep(.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

:deep(.avatar) {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
